<template>
  <div class="flex flex-sub flex-column padding-sm" ref="chartRef"></div>
</template>

<script setup lang="ts">

import * as echarts from 'echarts'
import {onMounted, onUnmounted, ref} from "vue";
//@ts-ignore
import elementResizeDetectorMaker from "element-resize-detector";
import {debounce} from "@/utils";

type EChartsOption = echarts.EChartsOption;
const erd = elementResizeDetectorMaker();
let option: EChartsOption;
const chartRef = ref()


onMounted(() => {
  const myChart = echarts.init(chartRef.value, {}, {
    height: 400
  });

  erd.listenTo(chartRef.value, debounce(() => {
    myChart.resize()
  }, 1000));
  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };
  option && myChart.setOption(option);
})

onUnmounted(()=>{
  erd.uninstall(chartRef.value)
})
</script>

<style scoped>
.canvas {
  width: 100%;
}

</style>